<template>
  <div class="collectAdd">
    <div class="collectAddMain">
      <el-form :model="formDataInfo" :rules="rules" ref="formInfo" class="form-box form-box-1">
        <div><img :src="iconMini1" alt=""> 基本信息</div>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="表名：" :label-width="formLabelWidth" prop="tableName">
              <el-input v-model="formDataInfo.tableName" placeholder="请输入表名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称：" :label-width="formLabelWidth" prop="name">
              <el-input v-model="formDataInfo.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类：" :label-width="formLabelWidth" prop="type">
              <el-select v-model="formDataInfo.type" placeholder="请选择分类">
                <el-option v-for="item in typecationList" :key="item.id" :label="item.authName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密级：" :label-width="formLabelWidth" prop="classification">
              <el-select v-model="formDataInfo.classification" placeholder="请选择密级">
                <el-option v-for="item in classificationList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="formDataField" ref="formField" class="form-box">
        <div><img :src="iconMini1" alt=""> 字段设置</div>
        <el-row :gutter="20" class="form-item-box">
          <el-col :span="2"><span>从表/视图导入</span></el-col>
          <el-col :span="5"><el-select v-model="formDataField.tableId" placeholder="请选择表">
              <el-option v-for="item in tableList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5"><el-select v-model="formDataField.Field" placeholder="请选择字段">
              <el-option v-for="item in fieldList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="_getProperty">导入</el-button>
          </el-col>
        </el-row>
        <div class="fieldBox" id="fieldBox" ref="fieldBox">
          <el-form :model="form" ref="dynamicForm" id="dynamicForm">
            <el-row :gutter="0" class="field-row" v-for="(item, index) in form.fieldBoxList" :key="item.id">
              <el-col :span="1">
                <el-form-item label="">
                  <div class="fieldNum">{{ index + 1 }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="字段名：" :label-width="formLabelWidth1" :prop="'fieldBoxList.' + index + '.fieldName'"
                  :rules="{ required: true, message: '请输入字段名', trigger: 'blur' }">
                  <el-input v-model="item.fieldName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="类型：" :label-width="formLabelWidth1" :prop="'fieldBoxList.' + index + '.fieldType'"
                  :rules="{ required: true, message: '请选择类型', trigger: 'change' }">
                  <el-select v-model="item.fieldType" placeholder="请选择类型">
                    <el-option label="文本" value="id" v-for="item in fieldTypeList" :key="item.id">{{ item.name }}</el-option>   
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="代码：" :label-width="formLabelWidth1" :prop="'fieldBoxList.' + index + '.fieldCode'"
                  :rules="{ required: true, message: '请输入代码', trigger: 'blur' }">
                  <el-input v-model="item.fieldCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="注释：" :label-width="formLabelWidth1" :prop="'fieldBoxList.' + index + '.fieldNote'">
                  <el-input v-model="item.fieldNote"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="" class="delBox">
                  <el-button type="primary" @click="_delField(index)" plain>删除</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="addFieldBox">
          <div @click="_addField"><i class="el-icon-plus" ></i> 添加字段</div>
        </div>
      </el-form>
    </div>
    <div class="btnBox">
      <el-button type="primary" @click="submit" class="submitBtn">提交</el-button>
      <el-button type="primary" @click="cancel" plain>取消</el-button>
    </div>
  </div>
</template>
<script>
import { UUID } from '@/assets/js/uuid.js'
import iconMini1 from '@/assets/images/iconMini1.png'
import Sortable from '@/assets/js/Sortable.min.js'
export default {
  components: {},
  props: {
    currentRowData: {
      type: Object,
      default: () => ({})
    },
    pageStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      iconMini1,
      formDataInfo: {},
      formDataField: {},
      formLabelWidth: '120px',
      formLabelWidth1: '85px',
      rules: {
        tableName: [
          { required: true, message: "请填写表名", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请填写名称", trigger: "blur" }
        ],
        type: [
          { required: true, message: "请选择分类", trigger: "blur" }
        ],
        classification: [
          { required: true, message: "请选择密级", trigger: "blur" }
        ],

      },
      tableList: [
        {
          id: '1',
          name: '表1'
        },
        {
          id: '2',
          name: '表2'
        },
        {
          id: '3',
          name: '表3'
        },
        {
          id: '4',
          name: '表4'
        },
        {
          id: '5',
          name: '表5'
        }
      ],
      fieldList: [
        {
          id: '1',
          name: '字段1'
        },
        {
          id: '2',
          name: '字段2'
        },
        {
          id: '3',
          name: '字段3'
        },
        {
          id: '4',
          name: '字段4'
        },

      ],
      classificationList: [
        {
          id: '1',
          name: '公开'
        },
        {
          id: '2',
          name: '秘密'
        },
        {
          id: '3',
          name: '绝密'
        },

      ],
      fieldTypeList:[
        {
          id: '1',
          name: '文本'
        },
        {
          id: '2',
          name: '数字'
        },
        {
          id: '3',
          name: '日期'
        },
        {
          id: '4',
          name: '时间'
        },
        {
          id: '5',
          name: '图片'
        }
      ],
      typecationList: [
        {
          id: '1',
          name: '力量构建'
        },
        {
          id: '2',
          name: '力量构建'
        },
        {
          id: '3',
          name: '力量构建'
        },
      ],
      form: {
        fieldBoxList: [
          // 示例初始数据
          { fieldName: '1', fieldType: '', fieldCode: '', fieldNote: '' ,id: '1'},
          { fieldName: '2', fieldType: '', fieldCode: '', fieldNote: '' ,id: '2'},
          { fieldName: '3', fieldType: '', fieldCode: '', fieldNote: '',  id: '3' },
          { fieldName: '4', fieldType: '', fieldCode: '', fieldNote: '', id: '4' },
          // 示例初始数据
        ]
      },

    }
  },
  created() {
  },
  computed: {},
  mounted() {
    const dynamicForm = this.$refs.dynamicForm.$el; // 获取 dynamicForm 容器
    new Sortable(dynamicForm, {
      animation: 150,
      onEnd: (event) => {
      const { oldIndex, newIndex } = event;
      const list = [...this.form.fieldBoxList];
      const movedItem = list.splice(oldIndex, 1)[0];
      list.splice(newIndex, 0, movedItem);
      this.form.fieldBoxList = list;
        // console.log('更新后的字段顺序：', this.form.fieldBoxList);
      }
    });
  },
  methods: {
    //导入表里的字段
    _getProperty() { },
    //提交
    submit() { 
      this.$emit('collectIndex', {state:true});
    },
    //取消
    cancel() {
       this.$emit('collectIndex', {state:true});
     },
    //添加字段
    _addField(){
      this.form.fieldBoxList.push({
        fieldName: '', fieldType: '', fieldCode: '', fieldNote: '' ,id: UUID.generate(),
      })
    },
    //删除
    _delField(index) {
      this.form.fieldBoxList.splice(index, 1);
    },
    //
  },
  watch: {
    'form.fieldBoxList': {
      handler(newVal) {
        // console.log('字段顺序已更新:', newVal);
        // 这里可以触发 API 请求保存新的顺序
      },
      deep: true
    }
  },

}
</script>
<style scoped>
.collectAddMain {
  background: var(--form-bg-a);
  border: 1px solid var(--bigborder-color);
  padding: 30px;
  box-sizing: border-box;
  margin-top: 5px;
  height: calc(100vh - 154px);
}

.form-box-1 {
  padding-right: 100px;
}

.fieldNum {
  height: 100%;
  text-align: center;
  background: var(--input-bg);
}

.field-row {
  border: 1px solid var(--bigborder-color);
  margin-bottom: 10px;
  cursor: pointer;
}
.field-row>div{
  margin: 20px 0;
}
.field-row>div:first-child{
  margin: 0;
  height: 80px;
}
.field-row>div:first-child>div{
  height: 100%;
}
.field-row>div:first-child>div>div{
  line-height: 80px;
}

.field-row .el-form-item {
  margin-bottom: 0;
  /* height: 72px; */
}
.field-row>div:first-child ::v-deep .el-form-item__content{
  line-height: 80px;
}

.field-row ::v-deep .el-form-item__content,
.field-row ::v-deep .el-form-item__label {
  /* line-height: 72px; */
}

.delBox {
  text-align: right;
  margin-right: 30px;
}

.form-item-box {
  margin-top: 10px;
}

.fieldBox {
  margin-top: 20px;
  max-height: calc(100vh - 490px);
  overflow: auto;
}



.btnBox {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bigborder-color);
  padding: 10px;
  box-sizing: border-box;
  margin-top: 15px;
  background: var(--form-bg-a);
}

.submitBtn {
  margin-right: 20px;
}

.addFieldBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.addFieldBox div {
  cursor: pointer;
  border: 1px solid var(--border-color);
  width: 200px;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
}
</style>